<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
    条件渲染
        1.v-if
            写法和其他编程语言一样 v-if{} v-else-if{} v-else{}
            适用于：切换频率较低的场景
            特点：不展示的DOM元素会被移除
            注意：跟其他编程语言一样 v-if v-else-if v-else 之间不允许被其他逻辑打断
        2.v-show
            写法：v-show="表达式"
            适用于：切换频率较高的场景
            特点：不展示的DOM仅仅只是加一个样式 => display:none
        3.备注
            使用v-if时，元素可能无法获取到，而v-show一定可以获取到
    -->
    <div id="root">
      <h2>当前的n值是：{{n}}</h2>
      <button @click="n++">点我n+1</button>
      <!-- <h2 v-show="false">欢迎来到{{name}}</h2>
      <h2 v-show="1===1">欢迎来到{{name}}</h2> -->

      <!-- <h2 v-if="false">欢迎来到{{name}}</h2>
      <h2 v-if="1===1">欢迎来到{{name}}</h2> -->

      <div v-if="n===1">Angular</div>
      <div v-else-if="n===2">Vue</div>
      <!--  Error compiling template:
            v-else-if="n===3" used on element <div> without corresponding v-if.
            为什么因为 v-else-if前面必须紧挨着v-if        
        -->
      <!-- <div>这样不对</div>  -->
      <div v-else-if="n===3">React</div>
      <div v-else>哈哈</div>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        data: {
          name: "尚硅谷",
          n: 0,
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
